<script lang="ts" setup>
import { ref } from 'vue'
import { resultDetailsType, stateType } from '@/api/bike/types/bike'
const dialogVisible = ref<boolean>(false)
defineProps<{
  resultDetails: resultDetailsType[] | undefined
}>()
const open = () => {
  dialogVisible.value = true
}
defineExpose({ open })
</script>

<template>
  <el-dialog
    title="检测结果"
    v-model="dialogVisible"
    width="300"
    class="bike-check-dialog"
    :modal="false"
    modal-class="bike-check-modal"
  >
    <el-scrollbar>
      <div class="">
        <div v-for="(detail, index) in resultDetails" :key="index" class="part_item">
          <div>
            <span>{{ detail.name }}</span>
            <el-icon
              v-if="detail.state === stateType.Nomal"
              color="var(--xy-success-color)"
              size="15"
              ><CircleCheckFilled
            /></el-icon>
            <el-icon v-else color="var(--xy-danger-color)" size="15"><CircleCloseFilled /></el-icon>
          </div>
          <div>
            {{ detail.description }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<style scoped></style>
